<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>用户详情页面</title>  
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/js/jquery.min.js"></script>
    <style>
        .son_user_list{
            
        }
        .son_user_list tr td{
            border: 1px solid #333;
            min-width: 200px;
            min-height: 30px;
        }
        .keywords tr td{
            border: 1px solid #666;
            min-width: 150px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        #mu{
            display: none;
        }
        .msg{
            display: none;
            background-color:#fff;
            position: absolute;
            width: 300px;
            height:270px;
            margin-top:-150px;
            margin-left:-150px;
            left: 50%;
            top:50%;
            z-index:1001;
        }
        .msg .x{
            display: block;
            position: absolute;
            left: 50%;
            margin-left: 135px;
            margin-top: -15px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 25px;
            background-color: #c70909;
            color: #fff;
            text-align: center;
            text-decoration: none;
        }
        .msg div{
            margin: 15px auto;
            width: 100%;
            height: 35px;
            text-align: center;
        }
        .msg div span{
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .msg div input[type="text"],input[type="password"]{
            display: inline-block;
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .msg div input[type="button"]{
            width: 120px;
            height: 30px;
            line-height: 30px;
            background-color: #1Add44;
            border: 1px solid #ddd;
            border-radius: 5px;
            color: #f6f6f6;
        }
        .black-mu{
            z-index:1000;
            position: absolute;
            background: rgba(0,0,0,0.5);
            width: 100vw;
            height: 100vh;
        }
        .cx-title{
            width: 100%;
            height: 35px;
            display: flex;
            justify-items: center;
            align-items: center;
        }
        .cx-title p{
            display: inline-block;
            width:90%;
            height: 30px;
            line-height: 30px;
            text-indent: 0.5em;
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .cx-title a{
            display: inline-block;
            width:10%;
            height: 30px;
            line-height: 30px;
            color:deepskyblue;
            text-align: center;
        }
    </style>
</head>  
<body>  
    <div class="black-mu" id="mu"></div>
    <div class="msg" id="msg">
        <a class="x" href="javascript:;" onclick="hidemsg()">X</a>
        <div>
            <span>账号</span>
            <input type="text" id="username">
        </div>
        <div>
            <span>密码</span>
            <input type="password" id="password">
        </div>
        <div>
            <span>确认密码</span>
            <input type="password" id="pwd">
        </div>
        <div>
            <span>子账号功能</span>
            <input type="radio" name="son" id="son1"><label for="son1">开启</label>
            <input type="radio" name="son" id="son2"><label for="son2">关闭</label>
        </div>
        <div>
            <input type="button" onclick="save_user()" value="确认">
        </div>
    </div>
    <div class="content">
        <div class="cx-title">
            <p>用户详情</p>
            <a href="/">
                返回首页
            </a>
        </div>
        <div class="cx-caption"><b>基础管理</b></div>
        <div>
            <ul>
                <li>
                    <div class="left">账号</div>
                    <div class="right" style="color: #c70909;"><b>{$info.username}</b></div>
                </li>
                <!-- <li>
                    <div class="left">昵称</div>
                    <div class="right">
                        <input type="text" id="nickname" value="{$info.nickname|default=''}">
                    </div>
                </li> -->
                {eq name="info.is_son" value="1"}
                <li>
                    <div class="left">子账号管理</div>
                    <div class="right">
                        <table class="son_user_list">
                            <thead>
                                <tr>
                                    <td>账号</td>
                                    <td>状态</td>
                                    <td>子账号功能</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody id="user_list">
                                {volist name="list" id="value"}
                                <tr>
                                    <td>{$value.username}</td>
                                    <td id="{$value.username}_status">{$value.status_text}</td>
                                    <td></td>
                                    <td id="{$value.username}_option">
                                        {eq name="value.status" value="1"}
                                        <a href="javascript:;" onclick="set_status('{$value.username}')">禁用</a>
                                        {else/}
                                        <a href="javascript:;" onclick="set_status('{$value.username}')">启用</a>
                                        {/eq}
                                    </td>
                                </tr>
                                {/volist}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4">
                                        <a href="javascript:;" onclick="showmsg()">添加</a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </li>
                {/eq}
                <li>
                    <div class="left">关键词搜索历史</div>
                    <div class="right">
                        <table class="keywords">
                            <thead>
                                <tr>
                                    <td>关键词</td>
                                    <td>数据</td>
                                    <td>价格</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody id="keywords">

                            </tbody>
                            <tfoot id="page">

                            </tfoot>
                        </table>
                    </div>
                </li>
            </ul>
        </div>
        <div class="cx-footer"></div>
        <div class="cx-bottom">
            <!-- <a href="javascript:;" onclick="">修改</a> -->
            <!-- <a href="">取消</a> -->
        </div>
    </div>
</body> 
<script>
    var tbody = document.getElementById('user_list')
        mu = document.getElementById('mu'),
        msg = document.getElementById('msg'),
        keywords = document.getElementById('keywords'),
        username = document.getElementById('username'),
        password = document.getElementById('password'),
        pwd = document.getElementById('pwd');
    get_keywords_list(1,20);
    function save_user(){
        let string = '',uniqid = generateUniqueId();
        if(!username.value)
            return alert('账号必须填写');
        if(!password.value)
            return alert('密码必须填写');
        if(password.value != pwd.value)
            return alert('两次密码不一致');
        $.ajax({
            url: '/index/user/save', // 你的 PHP 脚本的 URL  
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data: {username:username.value,password:password.value},
            success: function(res) { 
                if(res.code == 200){
                    string += '<tr>'; 
                    string += '<td>' + username.value + '</td>';
                    string += '<td id="' + username.value +'_status">正常</td>';
                    string += '<td id="' + username.value +'_option"><a href="javascript:;" onclick="set_status(\'' + username.value + '\')">禁用</a></td>';
                    string += '</tr>';
                    tbody.innerHTML += string;
                    hidemsg();
                }else{
                    return alert(res.msg);
                }
            }
        });
        
    }
    function get_keywords_list(page,size){
        let string = '';
        $.ajax({
            url: '/index/user/keywords', // 你的 PHP 脚本的 URL  
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data: {page:page,size:size},
            success: function(res) { 
                if(res.code == 200){
                    let data = res.data.data;
                    console.log(data);
                    data.forEach(item => {
                        string += '<tr id="' + item.keyword + '">'; 
                        string += '<td>' + item.keyword + '</td>';         
                        string += '<td>' + item.keywords.all + '</td>';
                        string += '<td>' + item.keywords.price + '</td>';
                        string += '<td><a href="/?keyword=' + item.keyword + '">查看</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="del(\'' + item.keyword + '\')">删除</a></td>';
                        string += '</tr>';
                    });
                    keywords.innerHTML += string;
                }else{
                    return alert('子账号添加出错');
                }
            }
        });
    }
    function showmsg(){
        username.value = password.value = pwd.value = '';
        mu.style = 'display:block';
        msg.style = 'display:block';
    }
    function hidemsg(){
        mu.style = 'display:none';
        msg.style = 'display:none';
    }
    function generateUniqueId() {  
        return Date.now().toString(36) + Math.random().toString(36).substring(7);  
    }
    function del(keyword){
        let m = document.getElementById(keyword);
        m.remove();
        $.ajax({
            url: '/index/user/del_keyword', // 你的 PHP 脚本的 URL  
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data: {keyword:keyword},
            success: function(res) { 
                if(res.code == 200){
                    alert('删除成功');
                }
            }
        });
    }
    function set_status(username){
        $.ajax({
            url: '/index/user/set_status', // 你的 PHP 脚本的 URL  
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
            dataType: 'json', // 预期服务器返回的数据类型  
            data: {username:username},
            success: function(res) { 
                if(res.code == 200){
                    if(res.data.status == 2){
                        document.getElementById(username + '_status').innerHTML = '禁用';
                        document.getElementById(username + '_option').innerHTML = '<a href="javascript:;" onclick="set_status(\'' + username + '\')">启动</a>';
                    }else{
                        document.getElementById(username + '_status').innerHTML = '正常';
                        document.getElementById(username + '_option').innerHTML = '<a href="javascript:;" onclick="set_status(\'' + username + '\')">禁用</a>';
                    }
                    alert('操作成功');
                }
            }
        });
    }
</script>
</html>